<template>
  <div class="host-rank">
    <h3 class="title">主持人等级设置</h3>
    <div class="hostContent clearfix">
      <dl>
        <dt><h4 class="hostTitle">等级名称</h4></dt>
        <dd v-for="item in listData" :key="item.id">
          <el-input v-model="item.classname" placeholder="请输入"></el-input>
        </dd>
      </dl>
      <dl>
        <dt><h4 class="hostTitle">最低额度</h4></dt>
        <dd v-for="(item, index) in listData" :key="index">
          <el-input v-model="item.minPrice" placeholder="请输入"></el-input>
        </dd>
      </dl>
      <dl>
        <dt><h4 class="hostTitle">最高额度</h4></dt>
        <dd v-for="(item, index) in listData" :key="index">
          <el-input v-model="item.maxPrice" placeholder="请输入"></el-input>
        </dd>
      </dl>
    </div>
    <div class="btn">
      <el-button type="primary" @click="saveHandle">保存</el-button>
    </div>
  </div>
</template>

<script>
import api from "../../api";

export default {
  data() {
    return {
      listData: [
        {
          id: "1",
          classname: "",
          minPrice: "",
          maxPrice: "",
        },
        {
          id: "2",
          classname: "",
          minPrice: "",
          maxPrice: "",
        },
        {
          id: "3",
          classname: "",
          minPrice: "",
          maxPrice: "",
        },
        {
          id: "4",
          classname: "",
          minPrice: "",
          maxPrice: "",
        },
        {
          id: "5",
          classname: "",
          minPrice: "",
          maxPrice: "",
        },
      ],
    };
  },
  methods: {
    saveHandle() {
      this.$message({
        type: "success",
        message: "保存成功",
      });
    },
  },
  mounted() {
    api.getHostRank().then((res) => {
      // console.log(res);
      if (res.status === 200) {
        let dataArr = res.data.list;
        for (let i = 0; i < dataArr.length; i++) {
          this.listData[i] = dataArr[i];
          //创建新数组 强制页面刷新
          this.listData = [...this.listData];
        }
      }
    });
  },
};
</script>

<style lang="less" scoped>
.host-rank {
  margin-left: 20px;
  .title {
    text-align: center;
    padding: 20px;
    background-color: #c4b4a9;
    margin-bottom: 10px;
  }
}
.hostContent dd {
  // border:1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
}
.hostContent {
  text-align: center;
}
.hostTitle {
  padding: 10px 0;
}

dl {
  float: left;
  width: 345px;
  margin: 20px 20px;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.btn {
  margin-left: 20px;
}
</style>